import Vue from "vue";
// 1.引入路由
import VueRouter from "vue-router";
// 2.安装路由插件
Vue.use(VueRouter);
// 4.配置路由和组件之间的对应关系

// 防止通过代码跳转路由，控制台出现报错内容
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

const routes = [
  {
    path: "",
    // 路由重定向
    redirect: "/home",
  },
  {
    path: "/home",
    name: "Home",
    meta: {
      title: "首页",
    },
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    meta: {
      title: "关于",
    },
    component: () => import("../views/About.vue"),
    children: [
      {
        path: "/about/ni",
        component: () => import("../components/Ni.vue"),
      },
      {
        path: "/about/ta",
        component: () => import("../components/Ta.vue"),
      },
    ],
  },
  {
    path: "/dynamic1",
    name: "Dynamic1",
    meta: {
      title: "动力1",
    },
    component: () => import("../views/Dynamic1.vue"),
    props: (route) => {
      return {
        uname: "大家的爹",
        age: 30,
        id: route.params.id,
      };
    },
  },
  {
    path: "/dynamic2/:age",
    name: "/dynamic2",
    meta: {
      title: "动力2",
    },
    // 表示进入路由之前回调这个函数(被称作路由独享守卫)
    beforeEach: (to, from, next) => {
      console.log(`被称作路由独享守卫`);
      next();
    },
    component: () => import("../views/Dynamic2.vue"),
    props: (route) => {
      return {
        userId: "cz",
        age: route.params.age,
      };
    },
  },
];
// 3.new VueRouter 创建路由对象
const router = new VueRouter({
  routes,
  // 将hash(哈希)模式改为history模式,更加好看些
  mode: "history",
  // 处于活跃的时候改变属性
  linkActiveClass: "actives",
  // 精准匹配用于a标签的连接时的匹配
  linkExactActiveClass: "activeA",
});
// 5.在main.js中挂载路由对象
// 6.app.vue中显示路由跳转router-link会渲染成a标签的
// 7.路由占位符

//前置钩子(前置守卫)
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title;
  next();
});
//后置钩子(后置守卫)
router.afterEach((to, from) => {});
export default router;
/* 
  location.hash 改变哈希值,网页的页面并不会刷新的,这个是HTML5提供的方法
    history.pushState({},"","home")
    history.replaceState({},"","home")
   
  location.href 则会刷新页面的


  router-link的其它属性
    tag (button、li)
      改变router-link渲染后的标签样式
    replace 
      不能点击返回按钮了
    
  
  .router-link-active
    表示处于活跃状态的路由
  active-class="active"
    代替.router-link-active
  
z
  通过代码的方式实现路由的跳转
    this.$router.push("/about");
    this.$router.replace("/about");
*/

/* 
  导航守卫就是监听了，从哪里跳到哪里的
  next()是必须要的默认调到下一个路由
    next(false) 表示中断跳转
    next("/") 或者 next({path: "/"}) 跳转到一个不同的地址，可以用来判断用户是否登录

  meta:表示描述数据的数据
    router.beforeEach((to,from,next)=>{
      从from跳转到to
      next();
    });
*/

/* 
    keep-alive使的组件不会被频繁的创建和销毁
      include 只有匹配的组件会被缓存
      exclude 任何匹配的组件都不会被缓存
*/
